<template>
  <view>
    <view class="order_row" v-show="rentOrder && rentOrder.usingStatus == 1">
      <view class="box">
        <view class="item_2">使用时长</view>
        <view class="item" :style="{ color: themeColor }">{{ rentOrder.distanceTime2 }}</view>
      </view>
      <view class="box">
        <view class="item_2">费用合计</view>
        <view class="item" :style="{ color: themeColor }" v-show="!rentOrder.delayedStatus">RMB {{ rentOrder.fee }}</view>
        <view class="item" :style="{ color: themeColor }" v-show="rentOrder.delayedStatus">暂停计费中</view>
      </view>
      <view class="box">
        <view class="item_2">免费时长</view>
        <view class="item" :style="{ color: themeColor }">{{ rentOrder.ruleMinuteFree - rentOrder.couponTime }}分钟</view>
      </view>
    </view>
    <view class="problem" v-show="rentOrder && rentOrder.usingStatus == 1">
      <view class="malfunction" @click="ejfailed">弹出失败</view>
      <view class="malfunction" @click="refailed">归还失败</view>
      <view class="malfunction" @click="other">其它问题</view>
    </view>
    <!-- 使用中 -->
    <view class="ball" v-if="rentOrder && rentOrder.usingStatus == 1 && !rentOrder.delayedStatus">
      <image class="background_img" src="@/static/images/icon_charging.png"></image>
    </view>
    <!-- 暂停计费 -->
    <view class="ball" v-if="rentOrder && rentOrder.usingStatus == 1 && rentOrder.delayedStatus">
      <image class="background_img" src="@/static/images/icon_suspend.png"></image>
      <view class="deferredText">
        暂停计费剩余：
        <text class="color">{{ rentOrder.delayRemainingTime }}</text>
        ，超时将继续计费
      </view>
    </view>
    <!-- 已丢失状态 -->
    <view class="alternative" v-else-if="rentOrder && rentOrder.usingStatus == 4">
      <view class="status_1">
        <view class="fulfilText" style="margin-top: 85rpx">
          <image src="@/static/images/icon_nike.png" class="photograph"></image>
          <view class="textStatus" style="color: #262626">已丢失</view>
        </view>
        <view class="textEnd">设备已丢失，请联系客户服务</view>
      </view>
    </view>
    <!-- 已归还未支付 -->
    <view class="alternative" v-else-if="rentOrder && rentOrder.usingStatus == 2 && !rentOrder.pay">
      <view class="status_1">
        <view class="fulfilText" style="margin-top: 42rpx">
          <image src="@/static/images/icon_time.png" class="photograph"></image>
          <view class="textStatus" :style="{ color: themeColor }">待付款</view>
        </view>
        <view class="textEnd" style="margin-top: 21rpx">你有一笔订单请尽快完成支付</view>
        <button class="goPay" :style="{ backgroundColor: themeColor }" @click="topay">去支付</button>
      </view>
    </view>
    <!-- 已购买未支付 -->
    <view
      class="alternative"
      v-else-if="(rentOrder && rentOrder.usingStatus == 3 && !rentOrder.pay) || (rentOrder.usingStatus == 4 && !rentOrder.pay) || (rentOrder.usingStatus == 5 && !rentOrder.pay)"
    >
      <view class="status_1">
        <view class="fulfilText" style="margin-top: 42rpx">
          <image src="@/static/images/icon_time.png" class="photograph"></image>
          <view class="textStatus" :style="{ color: themeColor }">待付款</view>
        </view>
        <view class="textEnd" style="margin-top: 21rpx">你有一笔订单请尽快完成支付</view>
        <button class="goPay" :style="{ backgroundColor: themeColor }" @click="topay">去支付</button>
      </view>
    </view>
    <!-- 已完成订单 -->
    <view class="alternative" v-else-if="rentOrder && rentOrder.usingStatus == 2 && rentOrder.pay">
      <view class="status_1">
        <view class="fulfilText" style="margin-top: 85rpx">
          <image src="@/static/images/icon_nike.png" class="photograph"></image>
          <view class="textStatus" style="color: #262626">已完成</view>
        </view>
        <view class="textEnd">已完成充电宝租借，欢迎下次使用</view>
      </view>
    </view>
    <!-- 购买订单 -->
    <view class="alternative" v-else-if="rentOrder && rentOrder.usingStatus >= 3 && rentOrder.pay">
      <view class="status_1" v-if="rentOrder.isSingleBank && days >= 0 && rentOrder.singleBank == 0">
        <view class="fulfilText" style="margin-top: 85rpx">
          <image src="@/static/images/icon_nike.png" class="photograph"></image>
          <view class="textStatus" style="color: #262626">已购买</view>
        </view>
        <view class="textEnd">
          归还充电宝可退款
          <text :style="{ color: themeColor }">￥{{ rentOrder.bankAmount }}</text>
          ，剩余
          <text :style="{ color: themeColor }">{{ rentOrder.days }}天</text>
          可归还
        </view>
      </view>
      <view class="status" v-else-if="!rentOrder.isSingleBank && days < 0 && rentOrder.singleBank == 0">
        <image src="@/static/images/icon_nike.png" class="photograph"></image>
        <view class="textStatus" style="color: #262626">已购买</view>
      </view>
      <view class="status_1" v-else-if="rentOrder.isSingleBank && rentOrder.singleBank == 1">
        <view class="fulfilText" style="margin-top: 85rpx">
          <image src="@/static/images/icon_nike.png" class="photograph"></image>
          <view class="textStatus" style="color: #262626">已回购</view>
        </view>
        <view class="textEnd">
          退款中：
          <text :style="{ color: themeColor }">￥{{ rentOrder.bankAmount }}</text>
          ，请耐心等待
        </view>
      </view>
      <view class="status_1" v-else-if="rentOrder.isSingleBank && rentOrder.singleBank == 2">
        <view class="fulfilText" style="margin-top: 85rpx">
          <image src="@/static/images/icon_nike.png" class="photograph"></image>
          <view class="textStatus" style="color: #262626">已回购</view>
        </view>
        <view class="textEnd">已退款：￥{{ rentOrder.bankAmount }}</view>
      </view>
    </view>
    <view class="top">
      <view style="text-align: center; padding-top: 30rpx; font-size: 38rpx; font-weight: bold">订单详情</view>
      <view class="detil" style="margin-top: 10rpx">
        <view class="list">
          <view class="text_numder">订单编号</view>
          <view class="text_features">
            <view style="float: left">{{ rentOrder.uuid }}</view>
            <span class="fuzhi" @click="copyBtn(rentOrder.uuid)">复制</span>
          </view>
        </view>
        <view class="list">
          <view class="text_numder">租借时间</view>
          <view class="text_features">
            <view>{{ rentOrder.createTimeFormt }}</view>
          </view>
        </view>
        <view class="list">
          <view class="text_numder">租借地点</view>
          <view class="text_features">
            <view>{{ rentOrder.box1SiteName }}</view>
          </view>
        </view>
        <view class="list" v-show="rentOrder && rentOrder.usingStatus != 1">
          <view class="text_numder">支付状态</view>
          <view class="text_features">
            <view :style="{ color: rentOrder.pay ? '#262626' : '#FE6019' }">{{ rentOrder.pay ? '已支付' : '待付款' }}</view>
          </view>
        </view>
        <view style="border-bottom: 1px #d7d7d7 dashed; width: 650rpx; margin: 0 auto"></view>
        <view style="margin: 18rpx 30rpx; font-size: 36rpx">资费详情</view>
        <view class="list" v-show="rentOrder">
          <view class="text_numder">产生费用</view>
          <view class="text_features">
            <view>￥ {{ rentOrder.fee }}</view>
          </view>
        </view>
        <view class="list" v-show="rentOrder">
          <view class="text_numder">使用时长</view>
          <view class="text_features">
            <view>{{ rentOrder.distanceTime2 }}</view>
          </view>
        </view>
        <view class="list" v-if="rentOrder && rentOrder.couponTime != 0">
          <view class="text_numder">优惠状态</view>
          <view class="text_features">
            <view>{{ rentOrder.couponTime == 0 ? '未优惠' : '已优惠' }}({{ rentOrder.couponTime }}分钟)</view>
          </view>
        </view>
        <view class="list" v-if="rentOrder && rentOrder.delayedStartTime != null">
          <view class="text_numder">延期状态</view>
          <view class="text_features">
            <view>已延期({{ rentOrder.delayTime }})</view>
          </view>
        </view>
        <view class="list" v-show="rentOrder.usingStatus <= 2 && rentOrder.pay">
          <view class="text_numder">归还时间</view>
          <view class="text_features">
            <view>{{ rentOrder.returnTimeFormt }}</view>
          </view>
        </view>
        <view class="list" v-show="rentOrder.usingStatus <= 2 && rentOrder.pay">
          <view class="text_numder">归还地点</view>
          <view class="text_features">
            <view>{{ rentOrder.box2SiteName }}</view>
          </view>
        </view>
        <view class="list" v-if="rentOrder && rentOrder.usingStatus >= 3 && rentOrder.pay">
          <view class="text_numder">购买方式</view>
          <view class="text_features">
            <view>{{ rentOrder.usingStatus == 5 || rentOrder.usingStatus == 3 ? '超时' : rentOrder.usingStausText }}</view>
          </view>
        </view>
        <view class="list" v-if="rentOrder && rentOrder.usingStatus >= 3 && rentOrder.pay">
          <view class="text_numder">购买时间</view>
          <view class="text_features">
            <view>{{ rentOrder.buyTimeFormt }}</view>
          </view>
        </view>
        <view class="list" v-if="rentOrder && rentOrder.fistMinute != 0">
          <view class="text_numder">起步价</view>
          <view class="text_features">
            <view>{{ rentOrder.fistMinute }}分钟 - {{ rentOrder.fistMinuteFee }}元</view>
          </view>
        </view>
        <view class="list" v-show="rentOrder">
          <view class="text_numder">计费规则</view>
          <view class="text_features">
            <view>{{ rentOrder.ruleCycleFee }}元/{{ rentOrder.ruleMinuteCycle }}分钟，封顶{{ rentOrder.ruleDayFee }}元/24小时</view>
          </view>
        </view>

        <view class="list" v-show="rentOrder">
          <view class="text_numder">支付状态</view>
          <view class="text_features">
            <view>{{ rentOrder.pay ? '已支付' : '待付款' }}</view>
          </view>
        </view>
        <view class="list" v-show="rentOrder">
          <view class="text_numder">押金方式</view>
          <view class="text_features">
            <view>{{ rentOrder.pay ? rentOrder.pay_way : '-' }}</view>
          </view>
        </view>
        <view class="list" v-show="rentOrder">
          <view class="text_numder">押金金额</view>
          <view class="text_features">
            <view>{{ rentOrder.securityFee ? rentOrder.securityFee : '0' }}元</view>
          </view>
        </view>
        <view style="border-bottom: 1px #d7d7d7 dashed; width: 650rpx; margin: 0 auto"></view>
      </view>
      <view style="margin: 18rpx 30rpx; font-size: 36rpx">租借设备信息</view>
      <view class="detil" style="margin-top: 15rpx">
        <view class="list" v-show="rentOrder">
          <view class="text_numder">柜机SN</view>
          <view class="text_features">
            <view>{{ rentOrder.box1DeviceId }}</view>
          </view>
        </view>
        <view class="list" v-show="rentOrder">
          <view class="text_numder">充电宝SN</view>
          <view class="text_features">
            <view>{{ rentOrder.singleDeviceUuid }}</view>
          </view>
        </view>
        <view v-if="rentOrder && rentOrder.usingStatus <= 3 && rentOrder.pay" style="height: 1px; background-color: #d7d7d7; width: 600rpx; margin: 0 auto"></view>
      </view>
      <view v-if="rentOrder && rentOrder.usingStatus <= 3 && rentOrder.pay" style="margin-left: 35rpx; margin-top: 21rpx; font-size: 32rpx">归还设备信息</view>
      <view class="detil" style="margin-top: 15rpx" v-if="rentOrder && rentOrder.usingStatus <= 3 && rentOrder.pay">
        <view class="list" v-show="rentOrder">
          <view class="text_numder">柜机SN</view>
          <view class="text_features">
            <view>{{ rentOrder.box2DeviceId == 0 ? '-' : rentOrder.box2DeviceId }}</view>
          </view>
        </view>
      </view>
      <view style="display: flex; justify-content: center; margin-bottom: 22rpx; margin-top: 8rpx">
        <view class="buttom" @click="appear">
          <image class="appear" :src="unfoldimg"></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { getRentOrderDetail, checkPopup, buyOrder, getcheckPopup } from '@/api/my';
import {serverUrl} from '@/utils/request'

//响应式变量
const orderId = ref(0);
const rentOrder = ref({});
const days = ref(0);
const bankAmount = ref(0);
const distanceTime = ref('');
const hiddenName = ref(true);
const unfoldimg  = ref('/static/images/unfold_0.png');
const unfold = ref(0);
const textSize = ref('');
const bomb = ref(false)
const { proxy } = getCurrentInstance();
const themeColor = ref(proxy.$globalData.theme.themeColor);

//待支付模块
const topay = () => {
  uni.redirectTo({
    url: `/pages/orderPay/orderPay?orderId=${orderId.value}`
  });
};

// 获取订单详情
const initData = async () => {
  try {
    const res = await getRentOrderDetail(orderId.value);
    console.log('获取订单详情-------->getRentOrderDetail', res);
    const data = res.data;
    rentOrder.value = data;
    days.value = data.days;
    bankAmount.value = data.bankAmount;
    distanceTime.value = data.distanceTime;
    if (data.distanceTime.indexOf('天') !== -1) {
      textSize.value = 'margin-top: 15rpx;font-size: 29rpx;';
    }
  } catch (error) {
    console.error('获取订单详情失败:', error);
  }
};

// 充电宝未弹出
const checkPop = async () => {
  try {
    const res = await checkPopup(orderId.value);
    if (res.data) {
      uni.showModal({
        content: '充电宝未弹出,可前往“帮助中心”查看,常见问题解决方案',
        cancelText: '取消',
        confirmText: '帮助中心',
        success: (modalRes) => {
          if (modalRes.confirm) {
            uni.navigateTo({
              url: `/pages/customer/customer?orderId=${orderId.value}&deviceId=${rentOrder.value.box1DeviceId}&deviceUuid=${rentOrder.value.box1DeviceUuid}`
            });
          }
        }
      });
    } else {
      uni.showModal({
        content: '检测到充电宝未弹出成功,已为您结束订单，未扣费',
        showCancel: false,
        confirmText: '返回首页',
        success: (modalRes) => {
          if (modalRes.confirm) {
            uni.navigateTo({
              url: '/pages/home/home'
            });
          }
        }
      });
    }
  } catch (error) {
    console.error('充电宝弹出失败:', error);
  }
};

const pupups = () => {
  const check = uni.getStorageSync('check');
  if (check == "check") {
    uni.removeStorageSync('check');
    uni.showModal({
      content: '检测到充电宝不在柜机中,如遇问题,可前往“帮助中心”查看',
      cancelText: '取消',
      confirmText: '帮助中心',
      success: (res) => {
        if (res.confirm) {
          uni.navigateTo({
            url: `/pages/customer/customer?orderId=${orderId.value}`
          });
        }
      }
    });
  }
  if (check == '200') {
    uni.removeStorageSync('check');
    uni.showModal({
      content: '检测到充电宝已归还,订单已结束.',
      cancelText: '首页',
      confirmText: '订单详情',
      success: (res) => {
        if (res.confirm) {
          uni.navigateTo({
            url: `/pages/orderDetails/orderDetails?orderId=${orderId.value}&deviceId=${rentOrder.value.box1DeviceId}&deviceUuid=${rentOrder.value.box1DeviceUuid}`
          });
        } else if (res.cancel) {
          uni.navigateTo({
            url: '/pages/home/home'
          });
        }
      }
    });
  }
  const click = uni.getStorageSync('click');
  if (rentOrder.value.bomb && click != orderId.value) {
    uni.setStorageSync('click', orderId.value);
    uni.showModal({
      content: '网络异常,请确认充电宝是否弹出',
      cancelText: '未弹出',
      confirmText: '已弹出',
      confirmColor: '#FF4500',
      success: (res) => {
        if (res.cancel) {
          if (rentOrder.value.singleDeviceUuid == '') {
            uni.showModal({
              content: '充电宝未弹出,可前往“帮助中心”查看,常见问题解决方案',
              cancelText: '取消',
              confirmText: '帮助中心',
              success: (modalRes) => {
                if (modalRes.confirm) {
                  uni.navigateTo({
                    url: `/pages/customer/customer?orderId=${orderId.value}&deviceId=${rentOrder.value.box1DeviceId}&deviceUuid=${rentOrder.value.box1DeviceUuid}`
                  });
                }
              }
            });
            return;
          }
          checkPop();
        } else if (res.confirm) {
          uni.setStorageSync('click', orderId.value);
        }
      }
    });
  }
};

// 弹宝失败
const ejfailed = async () => {
  try {
    const res = await getcheckPopup(orderId.value);
    const checkOrder = res.data;

    if (checkOrder == 1 || checkOrder == 2 || checkOrder == null) {
      uni.showModal({
        content: checkOrder.msg,
        confirmText: '确认',
        showCancel: false
      });
    } else if (checkOrder == 3) {
      uni.showModal({
        content: checkOrder.msg,
        cancelText: '取消',
        confirmText: '帮助中心',
        success: function (res) {
          if (res.confirm) {
            uni.navigateTo({
              url: '/pages/customer/customer'
            });
          }
        }
      });
    } else if (checkOrder == 4 || checkOrder == 5) {
      uni.showModal({
        content: checkOrder.msg,
        showCancel: false,
        confirmText: '返回首页',
        success: function (res) {
          if (res.confirm) {
            uni.navigateTo({
              url: '/pages/home/home'
            });
          }
        }
      });
    } else if (checkOrder == 6) {
      uni.showModal({
        content: '检测到充电宝已弹出,有其它问题,请到帮助中心查看解决',
        cancelText: '取消',
        confirmText: '帮助中心',
        success: function (res) {
          if (res.confirm) {
            uni.navigateTo({
              url: '/pages/customer/customer'
            });
          }
        }
      });
    } else {
      uni.redirectTo({
        url: '/pages/483/483?message=' + checkOrder.msg
      });
      return;
    }
  } catch (error) {
    console.error('弹宝失败:', error);
  }
};

//归还失败模块
const refailed = () => {
  if (rentOrder.value.singleDeviceUuid == '') {
    // 显示模态弹窗，可以只有一个确定按钮，也可以同时有确定和取消按钮
    uni.showModal({
      content: '充电宝未弹出,可前往“帮助中心”查看,常见问题解决方案',
      cancelText: '取消',
      confirmText: '帮助中心',
      success: (res) => {
        if (res.confirm) {
          //保留当前页面，跳转到应用内的某个页面
          uni.navigateTo({ url: '/pages/customer/customer' });
        }
      }
    });
    return;
  }
  // 显示模态弹窗，可以只有一个确定按钮，也可以同时有确定和取消按钮
  uni.showModal({
    content: '请重新扫描柜机来检测充电宝归还状态',
    cancelText: '取消',
    confirmText: '立即扫描',
    success: (res) => {
      if (res.confirm) {
        //扫码
        uni.scanCode({
          // onlyFromCamera: true,
          success(res) {
            if (!res || !res.result || res.result.indexOf('/app/r/scan.html?id=') == -1 || res.result.indexOf('?id=') == -1) {
              // 显示消息提示框。
              uni.showToast({ title: '请扫描柜机二维码', icon: 'warn', duration: 2000 });
              return;
            }
            if (!res.result.includes(serverUrl)) {
              uni.showToast({ title: '未识别该品牌柜机二维码', icon: 'warn', duration: 2000 });
              return;
            }
            const deviceId = res.result.substring(res.result.indexOf('=') + 1);
            //关闭当前页面，跳转到应用内的某个页面。
            uni.redirectTo({ url: '/pages/rentboxCheck/rentboxCheck?orderId=' + orderId.value + '&deviceId=' + deviceId });
          }
        });
      }
    }
  });
};

// 充电宝遗失模块
const other = () => {
  uni.showActionSheet({
    itemList: ['帮助中心', '购买充电宝/充电宝丢失了'],
    success(res) {
      if (res.tapIndex == 0) {
        uni.navigateTo({ url: '/pages/customer/customer' });
      } else if (res.tapIndex == 1) {
        uni.showModal({
          content: '是否确认遗失,确认遗失将购买',
          success: async (modalRes) => {
            if (modalRes.confirm) {
              try {
                await buyOrder(orderId.value);
                setTimeout(() => {
                  uni.redirectTo({
                    url: `/pages/orderDetails/orderDetails?id=${orderId.value}&buy=buy`
                  });
                }, 3000);
              } catch (error) {
                console.error('购买充电宝失败:', error);
              } finally {
                uni.hideLoading();
              }
            }
          }
        });
      }
    },
    fail(res) {
      console.log(res.errMsg);
    }
  });
};

//复制功能
const copyBtn = (uuid) => {
  //剪贴板
  uni.setClipboardData({
    data: uuid,
    success: () => {
      //显示消息提示框
      uni.showToast({ title: '复制成功' });
    }
  });
};

//折叠面板
const appear = () => {
  hiddenName.value = !hiddenName.value;
  unfold.value=Math.abs(unfold.value-1);
  unfoldimg.value = '/static/images/unfold_' + (hiddenName.value ? '0' : '1') + '.png';
};


/**
 * 生命周期函数--监听页面加载
 */
onLoad((options) => {
  if (options.buy == 'buy') {
    uni.showToast({
      title: '购买成功',
      icon: 'success',
      duration: 1000
    });
  }

  if (options.id || options.orderId) {
    orderId.value = options.id || options.orderId;
    initData(orderId.value);
  }

  if (options.bomb) {
    bomb.value = true;
  }
});
/**
 * 生命周期函数--监听页面显示
 */
onShow(() => {
  pupups();
});
</script>

<style lang="scss">
$light-color: #ececec;
page {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: $light-color;
}
.order_row {
  display: flex;
  justify-content: space-around;
  height: 164rpx;
  width: 750rpx;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 0rpx 0rpx 50rpx 50rpx;
  .box {
    padding-top: 30rpx;
    width: 250rpx;
    text-align: center;
    .item_2 {
      height: 50rpx;
      font-size: 30rpx;
      font-weight: 400;
      color: rgba(97, 97, 105, 1);
    }
    .item {
      margin-bottom: 32rpx;
      font-size: 30rpx;
      font-weight: bold;
      color: rgba(254, 96, 25, 1);
    }
  }
}

.problem {
  display: flex;
  justify-content: space-around;
  margin: 28rpx 0 0 45rpx;
  width: 660rpx;
  height: 80rpx;
  .malfunction {
    width: 202rpx;
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 16rpx;
    text-align: center;
    font-size: 30rpx;
    font-weight: 400;
    color: rgba(38, 38, 38, 1);
    background-color: rgba(255, 255, 255, 1);
  }
}

.ball {
  height: 350rpx;
  display: flex;
  justify-content: column;
  flex-flow: column;
  align-content: column;
  .background_img {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 26rpx auto;
    width: 320rpx;
    height: 320rpx;
  }
}

.alternative {
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding-top: 4rpx;
  height: 338rpx;
  .status_1 {
    display: flex;
    flex-direction: column;
    height: 310rpx;
    width: 750rpx;
    border-radius: 0 0 50rpx 50rpx;
    background-color: rgba(255, 255, 255, 1);
  }
  .fulfilText {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .status {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    align-items: center;
    height: 310rpx;
    width: 750rpx;
    border-radius: 0 0 50rpx 50rpx;
    background-color: rgba(255, 255, 255, 1);
  }
  .photograph {
    width: 44rpx;
    height: 44rpx;
  }
  .textStatus {
    font-size: 44rpx;
    font-weight: bold;
    padding-left: 11rpx;
  }
  .textEnd {
    margin-top: 28rpx;
    text-align: center;
    font-size: 28rpx;
    font-weight: 400;
    color: #616169;
  }
  .goPay {
    margin-top: 28rpx;
    width: 244rpx;
    height: 76rpx;
    border-radius: 38rpx;
    color: #ffffff;
    background-color: #fe6019;
    font-size: 32rpx;
  }
}

.top {
  margin: auto;
  width: 700rpx;
  border-radius: 16rpx;
  background-color: rgba(255, 255, 255, 1);
  .detil {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    margin-top: 30rpx;
  }
  .list {
    margin: 18rpx 30rpx;
  }
  .text_numder {
    float: left;
    font-size: 30rpx;
    font-weight: 400;
    color: rgba(97, 97, 105, 1);
  }
  .text_features {
    float: right;
    word-wrap: break-word;
    font-size: 30rpx;
    background: rgba(255, 255, 255, 1);
  }
  .fuzhi {
    margin: 6rpx 0 0 15rpx;
    padding: 0 15rpx;
    float: right;
    font-size: 22rpx;
    font-weight: 400;
    color: rgba(38, 38, 38, 1);
    text-align: center;
    border: 1rpx solid rgba(38, 38, 38, 1);
    border-radius: 10rpx;
    background-color: white;
  }
}
.deferredText {
  height: 60rpx;
  font-size: 31rpx;
  font-weight: 400;
  color: #616169;
  text-align: center;
}
.color {
  color: #fe600f;
}
.appear {
  width: 54rpx;
  height: 16rpx;
}
.buttom {
  width: 154rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 50rpx;
  justify-content: center;
}
</style>
